<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            background-color: #fafafc;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            user-select: none;
            white-space: nowrap;
        }

        .u1 {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 10px;
        }

        .u1>li {
            background-color: #fff;
            border-radius: 4px;
            padding: 2px 4px;
            border: 1px solid rgba(128, 128, 128, 0.3);
            cursor: pointer;
        }

        .u2 {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow-x: auto;
        }

        .u2>li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #fff;
            padding: 5px;
            gap: 5px;
        }

        .u2>li>img {
            width: 220px;
            object-fit: cover;
        }

        .u2>li>div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .u2>li>div>span {
            background-color: brown;
            padding: 2px 4px;
            border-radius: 2px;
        }

        .u3,
        .u4 {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .u3>li,
        .u4>li {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.3);
            margin: 10px 10px;
            padding: 10px;
            width: 25%;
        }

        .u3>li>img,
        .u4>li>img {
            height: 150px;
            width: 100%;
            box-sizing: border-box;
            object-fit: cover;
            transition: all 0.5s;
        }

        .u3>li>h4,
        .u4>li>h4 {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
            max-height: 3em;
            text-align: center;
        }

        .u3>li>div,
        .u4>li>div {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .u3>li>div>span,
        .u4>li>div>span {
            white-space: nowrap;
        }

        .u3>li>div>span:nth-of-type(2),
        .u4>li>div>span:nth-of-type(2) {
            color: brown;
            font-weight: 500;
        }
    </style>
</head>

<body>
    <h3>热搜标签</h3>
    <ul class="u1"></ul>
    <h3>秒杀数据</h3>
    <ul class="u2"></ul>
    <h3>促销精品数据</h3>
    <ul class="u3"></ul>
    <h3>排行榜数据</h3>
    <ul class="u4"></ul>

    <script type="module">
        import { getHotData, getSecKillData, getPromotionData, getRankData } from './api.js';

        function $(ele) {
            return document.querySelector(ele);
        }

        const u1 = $('.u1');
        const u2 = $('.u2');
        const u3 = $('.u3');
        const u4 = $('.u4');

        getHotData()
            .then(data => {
                let hotTags = data.data.list;
                u1.innerHTML = hotTags.reduce((total, item) => {
                    return total += `<li>${item}</li>`;
                }, '');
            })
            .catch(err => {
                console.error('获取数据失败:', err);
            });

        getSecKillData()
            .then(data => {
                let goods = data.data.seckillTime;
                u2.innerHTML = goods.reduce((total, item) => {
                    return total += `<li>
                                        <img src="${item.slide}" alt="">
                                        <div>
                                            <p>${item.time}</p>
                                            <span>${item.state}</span>
                                        </div>
                                    </li>`;
                }, '');
            })
            .catch(err => {
                console.error('获取数据失败:', err);
            });

        getPromotionData()
            .then(data => {
                let goods = data.data.list;
                u3.innerHTML = goods.reduce((total, item) => {
                    return total += `<li>
                                        <img src="${item.image}" alt="">
                                        <h4>${item.store_name}</h4>
                                        <div>
                                            <span>销量：${item.sales}</span>
                                            <span>￥${item.price}</span>
                                        </div>
                                    </li>`;
                }, '');
            })
            .catch(err => {
                console.error('获取数据失败:', err);
            });

        getRankData()
            .then(data => {
                let goods = data.data.list;
                u4.innerHTML = goods.reduce((total, item) => {
                    return total += `<li>
                                        <img src="${item.image}" alt="">
                                        <h4>${item.store_name}</h4>
                                        <div>
                                            <span>销量：${item.sales}</span>
                                            <span>￥${item.price}</span>
                                        </div>
                                    </li>`;
                }, '');
            })
            .catch(err => {
                console.error('获取数据失败:', err);
            });
    </script>
</body>

</html>